/*
 * @Author: cygao
 * @Last Modified by: xieqing
 * @Last Modified time: 2018-03-14
 */

<template>
  <div id="house-set">
    <div class="step">
      <flow>
        <flow-state title="验证房源" is-done></flow-state>
        <flow-line is-done></flow-line>

        <flow-state title="房屋信息" is-done></flow-state>
        <flow-line is-done></flow-line>

        <flow-state title="出租信息" is-done></flow-state>
        <flow-line ></flow-line>
         <flow-state title="选择合同"></flow-state>
        <flow-line></flow-line>

        <flow-state title="发布房源"></flow-state>
      </flow>
    </div>
    <div style="height:0.3rem;background:#f4f4f4"></div>
    <div class="house-add-img">
      <label class="m-img" for="file">
        <input id="file" style="display:none;" type="file" >
        <img :src="rentInfo.coverImg" alt="">
      </label>
    </div>
    <div style="height: 1.5rem;font-size: 0.6rem; text-align: center; color: #353535;">如需VR拍摄服务，请联系平台客服</div>
    <div class="divide-padding"></div>
    <div class="house-set-content">
      <div class="house-item" >
        <checklist class="house-rent-style" v-model="rentInfo.outManner" title="出租方式：" :options="outMannerList" :max="1"></checklist>
      </div>
<!--       <div class="house-item" >
        <x-input title='<span>房源标题：</span>' v-model="rentInfo.houseTitle" placeholder="5-15字" :max="15" placeholder-align="left"></x-input>
      </div> -->
      <div class="house-item" >
        <popup-picker title='<span>厅&emsp;&emsp;室：</span>' :data="houseValueList" placeholder="请选择房屋格局" v-model="rentInfo.houseValue"></popup-picker>
      </div>
      <div class="house-item" >
        <div style="float:right;height:30px;padding-top:3px;" @click="showPrompt1">
          <img src="../../../images/prompt.png" style="width:18px;height:18px;" alt="">
        </div>
        <x-input title='<span>租&emsp;&emsp;金：</span>' v-model="rentInfo.rentalPrice" placeholder="请输入租金金额" type="tel" :max="5" placeholder-align="left"></x-input>
      </div>
      <div class="house-item" >
        <selector placeholder="请选择押金方式" v-model="rentInfo.betNum" title="押金方式：" :options="betNumList"></selector>
      </div>
<!--       <div class="house-item" >
        <div style="float:right;height:1.5rem;padding-top:0.15rem;" @click="showPrompt2">
          <img src="../../../images/prompt.png" style="width:0.9rem;height:0.9rem;" alt="">
        </div>
        <checklist class="house-rent-style" v-model="rentInfo.isFreebet" title="诚信免押：" :options="isFreebetList" :max="1"></checklist>
      </div> -->
      <div class="house-item" >
        <selector placeholder="请选择交费周期" v-model="rentInfo.payNum" title="交费周期：" :options="payNumList"></selector>
      </div>
      <div class="house-item" >
        <selector placeholder="请选择装修详情" title="装修详情：" v-model="rentInfo.decoration" :options="decorationList"></selector>
      </div>
    </div>
    <x-dialog v-model="hintDialog1" class="dialog-hint">
      <h3 class="infoConfirm-hint">租金提示</h3>
      <p class="hint-black">您需要知悉如下关于租金的信息：</p>
      <ol class="hint-content">
        <li>成交租金不得高于此发布租金</li>
      </ol>
      <x-button type="primary" @click.native="hintDialog1 = false">我已知道</x-button>
      <i class="icon icon-close" @click="hintDialog1 = false"></i>
    </x-dialog>
    <x-dialog v-model="hintDialog2" class="dialog-hint">
      <h3 class="infoConfirm-hint">诚信免押</h3>
      <p class="hint-black">诚信免押注意事项：</p>
      <ol class="hint-content">
        <li>1.用户征信积分由腾讯征信提供;</li>
        <li>2.用户授权开通腾讯征信，如果用户的信用积分超过650（含）即可选择诚信免押服务，申请免押租房;</li>
        <li>3.选择诚信免押，用户若发生违约，会扣除相应额度，并扣除信用分，对个人买房、就业等会有影响。</li>
      </ol>
      <x-button type="primary" @click.native="hintDialog2 = false">我已知道</x-button>
      <i class="icon icon-close" @click="hintDialog2 = false"></i>
    </x-dialog>
    <div class="house-set-btn">
      <x-button class="btn" type="primary" @click.native="nextStep">下一步</x-button>
    </div>
  </div>
</template>
<script>
import UploadFileByTXY from '../../../util/uploadFileByTXY'
import { Checklist } from 'vux'
export default {
  components: {
    Checklist
  },
  data () {
    return {
      rentInfo: {
        coverImg: require('../../../images/rentHouse/uploadImg1.png'), // 封面图片
        images: [], // 上传的图片
        outManner: [], // 出租方式
        houseTitle: '', // 房源标题
        houseValue: [], // 房屋厅室
        rentalPrice: '', // 租金
        betNum: '', // 押金方式
        isFreebet: ['0'], // 诚信免押
        payNum: '', // 交费周期
        decoration: '' // 装修详情
      },
      defaultImg: require('../../../images/rentHouse/uploadImg1.png'),
      hintDialog1: false,
      hintDialog2: false,
      houseValueList: [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9'], ['室'],
        ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], ['厅'],
        ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'], ['卫']
      ],
      outMannerList: [],
      isFreebetList: [{key: '1', value: '是'}, {key: '0', value: '否'}],
      betNumList: [
        {
          key: 1,
          value: '押一'
        },
        {
          key: 2,
          value: '押二'
        },
        {
          key: 3,
          value: '押三'
        }
      ],
      payNumList: [
        {
          key: 1,
          value: '月付'
        }
      ],
      decorationList: []
    }
  },
  mounted () {
    // 上传各种证件证书图片区域
    UploadFileByTXY.upload({
      id: 'file',
      callback: (res) => {
        this.$router.push({path: './houseImages', query: {id: this.$route.query.id, firstImg: res.url}})
      }
    }, true)
  },
  created () {
    this.getData('CZFS')
    this.getData('ZX')
    // 获取从houseImages上传的图片
    let houseImages = window.localStorage.getItem('houseImages')
    if (houseImages) {
      console.log(houseImages)
      this.rentInfo.coverImg = JSON.parse(houseImages).coverImg
      this.rentInfo.images = JSON.parse(houseImages).images
    }
    // 获取编辑的房源数据
    let houseId = this.$route.query.id
    if (houseId) {
      this.$axiosPosting(this.$api.getMyHouseById, {houseId: houseId}).then((res = {}) => {
        if (res.code === '0000') {
          let resData = res.data || {}
          let {images, coverImg, houseTitle, outManner, layoutRoom, layoutHall, layoutToilet, rentalPrice, betNum, payNum, isFreebet, decoration} = resData
          this.rentInfo = {
            images: images.split(','),
            coverImg,
            houseTitle,
            outManner: [outManner],
            houseValue: [layoutRoom, '室', layoutHall, '厅', layoutToilet, '卫'],
            rentalPrice: rentalPrice / 100,
            betNum,
            payNum,
            isFreebet: [isFreebet],
            decoration
          }
        }
      })
    }
  },
  methods: {
    // 获取筛选条件
    getData (codeType) {
      this.$axiosPosting(this.$api.getHouseAttributeByCodeType, { codeType }).then((res = {}) => {
        if (res.code === '0000') {
          let data = res.data || []
          this.setData(codeType, data)
        }
      })
    },
    // 筛选条件赋值至data中
    setData (codeType, data) {
      switch (codeType) {
        case 'CZFS':
          data.map(item => {
            this.outMannerList.push({'key': item.code, 'value': item.value})
          })
          break
        case 'ZX':
          data.map(item => {
            this.decorationList.push({'key': item.code, 'value': item.value})
          })
          break
      }
    },
    beforeSubmit () {
      if (this.rentInfo.coverImg === this.defaultImg) {
        this.$vux.toast.text('请添加房源照片')
        return false
      }
      if (!this.rentInfo.outManner.length > 0) {
        this.$vux.toast.text('请选择出租方式')
        return false
      }
      // if (!this.rentInfo.houseTitle) {
      //   this.$vux.toast.text('请输入房屋标题')
      //   return false
      // } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(this.rentInfo.houseTitle)) {
      //   this.$vux.toast.text('请输入中文、英文或者数字')
      //   return false
      // }
      if (!this.rentInfo.houseValue.length > 0) {
        this.$vux.toast.text('请选择房屋厅室')
        return false
      }
      if (!this.rentInfo.rentalPrice) {
        this.$vux.toast.text('请输入租金金额')
        return false
      } else if (!/^[0-9]+$/.test(this.rentInfo.rentalPrice)) {
        this.$vux.toast.text('租金请输入数字')
        return false
      } else if (this.rentInfo.rentalPrice < 1) {
        this.$vux.toast.text('租金不能小于1元')
        return false
      }
      if (!this.rentInfo.betNum) {
        this.$vux.toast.text('请选择押金方式')
        return false
      }
      if (!this.rentInfo.isFreebet.length > 0) {
        this.$vux.toast.text('请选择是否诚信免押')
        return false
      }
      if (!this.rentInfo.payNum) {
        this.$vux.toast.text('请选择交费周期')
        return false
      }
      if (!this.rentInfo.decoration) {
        this.$vux.toast.text('请选择装修状况')
        return false
      }
      return true
    },
    nextStep () {
      if (!this.beforeSubmit()) return // 下一步前验证输入数据
      let pubishHouseData = JSON.parse(window.localStorage.pubishHouseData || '{}')
      let localData = {
        ...pubishHouseData,
        ...this.rentInfo
      }
      localStorage.setItem('pubishHouseData', JSON.stringify(localData))
      this.$router.push({path: './chooseContract', query: {id: this.$route.query.id}})
    },
    showPrompt1 () {
      this.hintDialog1 = true
    },
    showPrompt2 () {
      this.hintDialog2 = true
    }
  }
}
</script>

<style lang="less">
  #house-set{
    font-size: 0.75rem;
    background: #fff;
    min-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .divide-padding{
      height:0.3rem;
      background: #f2f5fb;
    }
    .house-add-img{
      text-align: center;
      height: 12.0rem;
      position: relative;
      z-index: 10;
      img{
        position: relative;
        width:100%;
        height: 12.0rem;
        display: block;
        object-fit: cover;
        z-index: -1;
      }
    }
    .house-set-content{
      padding: 0 0.75rem;
      .house-item{
        // display: flex;
        line-height: 2.4rem;
        .weui-cell:before{
          border: none;
          height:0px;
        }
        border-bottom: 1px solid #ccc;
        .house-rent-style{
          display: flex;
          // background: green;
          .weui-cells__title {
            margin:0;
            padding: 0;
            color: black;
            font-size: 0.75rem;
          }
          .weui-cells:before{
            border: none;
            height: 0;
          }
          .weui-cell:before{
            border: none;
            height:0;
          }
          .weui-cells:after{
            border:none;
          }
          .weui-cells_checkbox{
            display: flex;
            flex: 1;
            color:#999;
            justify-content: space-around;
          }
          .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
            color: #ff9600;
          }
        }
        span{
          width: 4rem;
        }
        .vux-cell-box:before{
          border:none;
        }
        .vux-cell-box .weui-label{
          width: 5.25rem!important;
        }
        .vux-popup-picker-select{
          text-align: left!important;
          .vux-cell-value{
            color: #000;
          }
        }
        input{
          flex: 1;
          border:none;
          outline:none;
          font-size: 0.75rem;
        }
        .weui-cell{
          padding: 0;
        }
        .weui-cell_select .weui-cell__bd:after{
          right:0;
        }
      }
    }
    .house-set-btn{
      margin-top: 3.6rem;
      margin-bottom: 0.5rem;
      padding: 0 0.75rem;
      .btn{
        background: #169bd5;
        height: 2.5rem;
      }
    }
  }
</style>
<style lang="less">
  #house-set{
    .dialog-hint{
      .weui-dialog{
        padding: 0.75rem;
        box-sizing: border-box;
        color: #343434;
        text-align: left;
        overflow: initial;
        margin-top: -1.5rem;
        .infoConfirm-hint{
          font-size: 1.1rem;
          text-align: center;
        }
        .hint-black{
          font-size: 0.75rem;
        }
        .hint-content{
          // display: block;
          font-size: 0.6rem;
          color: #777;
          max-height:15.0rem;
          overflow-y:scroll;
          li{
            margin-top: 1.0rem;
            margin-bottom: 1.0rem;
          }
        }
        .icon-close{
          display: block;
          width: 1.75rem;
          height: 1.75rem;
          position: absolute;
          bottom: -3.15rem;
          left: 0;
          right: 0;
          margin: auto;
          background: url('../../../images/icon_close.png') center no-repeat;
          background-size: 100%;
        }
      }
    }
  }
</style>

